<template>
  <a-modal
    title="限定词管理"
    :footer="null"
    @cancel="handleCancel"
    :bodyStyle="{height: modalHeight()}"
    :visible="visible"
    :width="modalWidth()"
    :centered="true"
  >
    <a-spin :spinning="confirmLoading">
      <a-button type="primary" @click="$refs.addForm.index(mRecord)" style="margin-bottom: 22px">添加</a-button>
      <div style="margin-bottom: 22px;font-size: 14px">
        <span style="color: #333333;font-weight: bold">当前词 :  </span>
        <span style="color: red;font-weight: bold">{{ keyWords }}</span>
      </div>
      <a-table
        style="margin-bottom: 22px"
        :pagination="false"
        :rowKey="(record) => record.index"
        :columns="columns"
        :data-source="data">
        <span slot-scope="keys" style="color: red" slot="keys">{{ keys }}</span>
      </a-table>
      <add-form ref="addForm" @qualifierReload="reload"></add-form>
    </a-spin>
  </a-modal>
</template>

<script>

import { qualifierList } from '@/api/modular/main/knowl/relation/relationManage'
import AddForm from '@/views/main/knowl/relation/qualifier/addForm'
import { register } from '@/utils/drag_modal'

export default {
  components: { AddForm },
  data() {
    return {
      visible: false,
      mRecord: {},
      data: [],
      keyWords: '',
      columns: [
        {
          title: '序号',
          align: 'center',
          dataIndex: 'index',
          width: '10%'
        },
        {
          title: '限定类型',
          align: 'center',
          dataIndex: 'name',
          width: '20%'
        },
        {
          title: '关系词',
          align: 'center',
          dataIndex: 'keys',
          width: '50%',
          scopedSlots: { customRender: 'keys' }
        }
      ],
      confirmLoading: false,
      queryParams: {}
    }
  },
  methods: {
    modalWidth() {
      return document.body.clientWidth * 0.7
    },
    modalHeight() {
      return (document.body.clientHeight * 0.8) + 'px'
    },
    handleCancel() {
      register(false)
      this.visible = false
    },
    // 初始化方法
    index(record) {
      this.visible = true
      this.mRecord = record
      this.keyWords = record.chName
      this.queryParams.relationId = record.id
      this.loadList()
      register(true)
    },
    reload() {
      this.loadList()
    },
    loadList() {
      this.confirmLoading = true
      qualifierList(this.queryParams)
        .then((res) => {
          this.confirmLoading = false
          const datas = res.data
          datas.forEach((it, index) => {
            it.index = index + 1
            it.keys = it.relations.map((relation) => relation.chName).join('，')
          })
          this.data = datas
        })
        .catch(() => {
          this.confirmLoading = false
        })
    }
  }
}
</script>
